<template>
	<view class="container">
		<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-bar">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="title">账单详情</text>
			</view>
			<view class="amount-display">
				<text class="amount" :class="{ 'income': billData.amount > 0 }">
					{{ billData.amount > 0 ? '+' : '' }}{{ billData.amount }}
				</text>
				<text class="status" :class="{ 'success': billData.status === '已完成' }">{{ billData.status }}</text>
			</view>
		</view>
		
		<view class="detail-content">
			<!-- 主要信息卡片 -->
			<view class="detail-card main-info">
				<view class="card-header">
					<text class="card-title">基本信息</text>
				</view>
				<view class="info-item">
					<text class="item-label">交易类型</text>
					<view class="item-value category">
						<text class="category-icon">{{ billData.icon }}</text>
						<text>{{ billData.category }}</text>
					</view>
				</view>
				<view class="info-item">
					<text class="item-label">交易时间</text>
					<text class="item-value">{{ formatTime(billData.time) }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">订单编号</text>
					<text class="item-value order-no">{{ billData.orderNo }}</text>
				</view>
			</view>
			
			<!-- 支付信息卡片 -->
			<view class="detail-card payment-info">
				<view class="card-header">
					<text class="card-title">支付信息</text>
				</view>
				<view class="info-item">
					<text class="item-label">支付方式</text>
					<text class="item-value">{{ billData.paymentMethod }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">交易地点</text>
					<text class="item-value">{{ billData.location }}</text>
				</view>
			</view>
			
			<!-- 备注信息卡片 -->
			<view class="detail-card remark-info">
				<view class="card-header">
					<text class="card-title">备注信息</text>
				</view>
				<view class="remark-content">
					<text>{{ billData.remark || '无备注信息' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="action-btn share" @click="handleShare">分享</button>
			<button class="action-btn delete" @click="handleDelete">删除</button>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
	data() {
		return {
			statusBarHeight: 0,
			billData: null
		}
	},
	onLoad(options) {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		if (options.data) {
			this.billData = JSON.parse(decodeURIComponent(options.data))
		}
	},
	methods: {
		...mapActions(['deleteBill', 'loadBills']),
		formatTime(time) {
			const date = new Date(time)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		},
		goBack() {
			uni.navigateBack()
		},
		handleShare() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},
		handleDelete() {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.deleteBill(this.billData.orderNo)
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}
						})
					}
				}
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
	padding: 20rpx 40rpx 60rpx;
}

.nav-bar {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	color: #fff;
	font-size: 40rpx;
}

.title {
	color: #fff;
	font-size: 32rpx;
	margin-left: 20rpx;
}

.amount-display {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.amount {
	font-size: 72rpx;
	color: #f43f5e;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.amount.income {
	color: #10B981;
}

.status {
	font-size: 24rpx;
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
	padding: 4rpx 20rpx;
	border-radius: 20rpx;
}

.status.success {
	background: rgba(16, 185, 129, 0.2);
}

.detail-content {
	margin-top: -30rpx;
	padding: 0 40rpx;
}

.detail-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.card-title {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.item-label {
	font-size: 28rpx;
	color: #999;
}

.item-value {
	font-size: 28rpx;
	color: #333;
}

.category {
	display: flex;
	align-items: center;
}

.category-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

.order-no {
	font-family: monospace;
	color: #6366F1;
}

.remark-content {
	padding: 20rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 40rpx;
	background: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin: 0 10rpx;
}

.action-btn.share {
	background: #6366F1;
	color: #fff;
}

.action-btn.delete {
	background: #fff;
	color: #f43f5e;
	border: 2rpx solid #f43f5e;
}

.action-btn::after {
	border: none;
}

.delete-btn {
	width: 90%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #ff4d4f;
	color: #fff;
	border-radius: 44rpx;
	margin: 40rpx auto;
	font-size: 32rpx;
}
</style> 